<template>
  <div class="home-swiper-list">
    <swiper :options="swiperOption"
            v-if="showSwiper"
            ref="swiper">
      <!-- slides -->
      <swiper-slide aspectratio
                    w-750-286
                    v-for="(item,index) of list"
                    :key="index">
        <img :src="item"
             alt=""
             aspectratio-content
             @load="loadDataed">
      </swiper-slide>
      <!-- Optional controls -->
    </swiper>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
export default {
  name: 'HomeSwiper',
  props: {
    list: {
      type: Array
    }
  },
  data () {
    return {
      swiperOption: {
        observer: true,
        observeParents: true,
        on: {
          tap: () => {
            const swiper = this.$refs.swiper.swiper
            this.handShowGallery(swiper.realIndex)
          }
        }
      }
    }
  },
  computed: {
    showSwiper () {
      return this.list.length
    }
  },
  methods: {
    loadDataed () {
      this.$emit('loadImg')
    },
    handShowGallery (index) {
      const images = this.list
      const startPosition = index
      ImagePreview({
        images,
        startPosition
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.home-swiper-list >>> .swiper-pagination-bullets .swiper-pagination-bullet-active
  background-color $common_bgc
  width 10px
  height 10px
  background-color $common_bgc
  border-radius 50%

.home-swiper-list >>> .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet
  width 10px
  height 10px
  border 1px solid $common_bgc
  border-radius 50%
  opacity 1

.home-swiper-list >>> .swiper-pagination-bullet
  background-color transparent

.home-swiper-list >>> .swiper-pagination
  text-align right
  padding-right 24px
  box-sizing border-box

.home-swiper-list
  touch-action none
</style>
